<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>QQ头像展示</title>
    <style>
        /* 设置容器为网格布局，10列 */
        .container {
            display: grid;
            grid-template-columns: repeat(10, 100px); /* 10列，每列宽度100px */
            grid-gap: 10px; /* 网格间距 */
            justify-content: center; /* 居中对齐 */
            margin-top: 50px; /* 顶部间距 */
        }
        /* 设置图片样式 */
        .container img {
            width: 100px;
            height: 100px;
            object-fit: cover; /* 保持图片比例 */
            border: 1px solid #ccc; /* 图片边框 */
            border-radius: 10px; /* 图片圆角 */
        }
    </style>
</head>
<body>

<div class="container" id="avatarContainer">
    <!-- 图片将通过JavaScript动态插入到这里 -->
</div>

<script>
    // 获取容器元素
    const container = document.getElementById('avatarContainer');

    // 遍历0到99的数字
    for (let i = 0; i < 100; i++) {
        // 创建img元素
        const img = document.createElement('img');
        // 初始化文件扩展名
        let fileExtension = 'bmp'; // 默认尝试使用bmp

        // 创建图片路径
        let imgPath = `../img/img/${i}.${fileExtension}`;

        // 创建一个新的Image对象用于检查图片是否存在
        const imgCheck = new Image();

        // 设置图片路径
        imgCheck.src = imgPath;

        // 当图片加载完成时（无论成功还是失败），执行回调函数
        imgCheck.onload = function() {
            // 如果图片加载成功，说明bmp文件存在
            img.src = imgPath;
            img.alt = `QQ头像${i}`;
            container.appendChild(img);
        };

        imgCheck.onerror = function() {
            // 如果bmp图片加载失败，尝试使用png
            fileExtension = 'png';
            imgPath = `../img/img/${i}.${fileExtension}`;

            // 更新imgCheck的src为png路径
            imgCheck.src = imgPath;

            // 重新尝试加载png图片
            imgCheck.onload = function() {
                img.src = imgPath;
                img.alt = `QQ头像${i}`;
                container.appendChild(img);
            };

            imgCheck.onerror = function() {
                // 如果png图片也加载失败，跳过加载该图片
                console.log(`图片${i}加载失败`);
            };
        };
    }
</script>

</body>
</html>